CheckButton.ts 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /*
  2. 临时测试用 check按钮
  3. */
  4. import { _decorator, Color, Component, EventTouch, Input, Label, Node, Sprite } from 'cc';
  5. import { UsefulTools } from '../curvetexture/UsefulTools';
  6. const { ccclass, property } = _decorator;
  7. @ccclass('CheckButton')
  8. export class CheckButton extends Component {
  9. @property(Node)
  10. node_desc: Node | null = null;
  11. private _onoff = false;
  12. private _func: (from: CheckButton) => void;
  13. get onoff() {
  14. return this._onoff;
  15. }
  16. // set onoff(value: boolean) {
  17. // this._onoff = value;
  18. // this.refreshByOnOff();
  19. // }
  20. protected onLoad(): void {}
  21. protected onEnable(): void {
  22. let node = this.node;
  23. node.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
  24. node.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
  25. node.on(Input.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
  26. this.refreshByOnOff();
  27. }
  28. protected onDisable(): void {
  29. this.node.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
  30. this.node.off(Input.EventType.TOUCH_END, this.onTouchEnd, this);
  31. this.node.off(Input.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
  32. }
  33. start() {}
  34. refreshByOnOff() {
  35. this.node.setScale(1, 1, 1);
  36. this.node.getComponent(Sprite)!.color = new Color().fromHEX('#092b00');
  37. this.node_desc.getComponent(Label)!.color = new Color().fromHEX('#f4ffb8');
  38. if (this._target && this._propertyKey) {
  39. this.node_desc.getComponent(Label)!.color = this._onoff
  40. ? new Color().fromHEX('#f4ffb8')
  41. : new Color().fromHEX('#666666');
  42. }
  43. }
  44. private _target: any = null;
  45. private _propertyKey: string | null = null;
  46. // 绑定外部目标和对象
  47. bindData(target: any, propertyKey: string) {
  48. if (!target || !propertyKey) {
  49. console.error('CheckButton bind error: target or propertyKey is null');
  50. return;
  51. }
  52. const v1 = (UsefulTools.isGetter(target, propertyKey) as boolean) || target[propertyKey] != undefined;
  53. if (!v1) {
  54. console.error(`CheckButton bind error: target does not have property or getter ${propertyKey}`);
  55. return;
  56. }
  57. const v = target[propertyKey];
  58. if (typeof v !== 'boolean') {
  59. console.error(`CheckButton bind error: target property ${propertyKey} is not boolean`);
  60. return;
  61. }
  62. this._target = target;
  63. this._propertyKey = propertyKey;
  64. this.refreshByOnOff();
  65. }
  66. update(deltaTime: number) {
  67. if (this._target && this._propertyKey) {
  68. const value = this._target[this._propertyKey];
  69. if (this._onoff !== value) {
  70. this._onoff = value;
  71. this.refreshByOnOff();
  72. }
  73. }
  74. }
  75. bindFunction(func: (from: CheckButton) => void) {
  76. if (typeof func !== 'function') {
  77. console.error('CheckButton bindFunction error: func is not a function');
  78. return;
  79. }
  80. this._func = func;
  81. }
  82. onTouchStart(event: EventTouch) {
  83. this.node.setScale(0.98, 0.98, 1);
  84. this.node.getComponent(Sprite)!.color = Color.GRAY;
  85. }
  86. onTouchEnd(event: any) {
  87. this._onoff = !this._onoff;
  88. this.refreshByOnOff();
  89. if (this._target && this._propertyKey) {
  90. this._target[this._propertyKey] = this._onoff;
  91. }
  92. if (this._func) {
  93. this._func(this);
  94. }
  95. }
  96. onTouchCancel(event: EventTouch) {
  97. this.refreshByOnOff();
  98. }
  99. protected onDestroy(): void {}
  100. }